<template>
  <div class="login-wrap">
    <el-form 
      :label-position="labelPosition" 
      label-width="auto" 
      :model="formLabelAlign" 
      style="max-width: 300px;" 
      class="login-container"
      :rules="rules" 
      ref="ruleFormRef"
      @submit.prevent="handleSubmit"
    >
      <el-form-item prop="username">
        <el-input v-model="formLabelAlign.username" placeholder="请输入账号" clearable style="height: 45px;" />
      </el-form-item>
      <el-form-item prop="phone">
        <el-input v-model="formLabelAlign.phone" placeholder="请输入手机号" clearable style="height: 45px;"/>
      </el-form-item>
      <el-form-item prop="newPassword">
        <el-input 
          v-model="formLabelAlign.newPassword" 
          type="password" 
          placeholder="请输入新密码" 
          show-password 
          clearable 
          style="height: 45px;"
        />
      </el-form-item>
      
      <el-form-item class="btn-box">
        <el-button 
          type="primary" 
          style="width: 100%; background-color:#07A2EC; height: 45px;"  
          native-type="submit"
          :loading="loading"
        >
          确定
        </el-button>
      </el-form-item>
      
      <el-form-item class="btn-box" style="text-align: right;">
        <router-link class="link-div" :to="{ path: '/login' }">
          返回登录
        </router-link>    
      </el-form-item>
    </el-form>
  </div>
</template>
 
<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const router = useRouter()

const labelPosition = ref('right')
const ruleFormRef = ref()
const loading = ref(false)

const formLabelAlign = reactive({
  username: '',
  phone: '',
  newPassword: '',
})

const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 18, message: '密码长度在6-18个字符', trigger: 'blur' }
  ],
})

const handleSubmit = async () => {
  try {
    // 验证表单
    await ruleFormRef.value.validate()
    loading.value = true
    
    // 调用后端API
    const response = await axios.post('/api/user/updatePasswordByPhone', {
      username: formLabelAlign.username,
      phone: formLabelAlign.phone,
      newPassword: formLabelAlign.newPassword
    })
    
    if (response.data.code === 200) {
      ElMessage.success('密码修改成功')
      router.push('/login') // 跳转到登录页
    } else {
      ElMessage.error(response.data.message || '密码修改失败')
    }
  } catch (error) {
    if (error.response) {
      // 请求已发出，服务器响应状态码不在2xx范围内
      ElMessage.error(error.response.data.message || '服务器错误')
    } else if (error.request) {
      // 请求已发出，但没有收到响应
      ElMessage.error('网络错误，请稍后重试')
    } else {
      // 其他错误
      ElMessage.error(error.message)
    }
  } finally {
    loading.value = false
  }
}
</script>
 
 <style  scoped>
 .biaoti{
    width: 30%;
    height: 100px;
    display: flex;
    justify-content: left;
    align-items: top;
 }
 .tubiao{
     height: 40px;
     width: 40px;
 }
 .wz{
     text-align: left; 
     color: black;
     font-size: 50px;
 }
 
 .el-input{
     height: 38px;
   }
   .code-img{
     width: 100%;
     height: 38px;
     background-color: aquamarine;
     display: flex;
     justify-content: center;
     align-items: center;
   }
   .link-div{
     color: red;
     text-decoration: none;
     font-family: sans-serif;
     font-size: 10px;
   }
   
   ::v-deep(.btn-box>.el-form-item__content){
     display: flex;
     justify-content: space-between;
   }
   .login-wrap{
     box-sizing: border-box;
     width: 1510px;
     height: 720px;
     background-image: url("@/assets/image/login.jpg");
     background-size: 100% 100%;
     background-repeat: no-repeat;
     display: flex;
     justify-content:center;
     align-items: center;
   }
   .login-container{
     width: 350px;
     
     padding: 35px;
     border-radius: 6px;
     box-shadow: 0 0 20px 0 #c7c6c6; 
     justify-content: left;
     align-items: center;
     background-color:rgb(255, 255, 255,0.8);
     color:black;
   }
   .bq{
     padding-left: 100px;
   }
 </style>